<template>
  <view
    class="content"
    :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }"
  >
    <hearbar></hearbar>
    <view class="p-a-ll back-white body flex flex-col">
      <view v-for="item in list">
        <view
          v-if="item.time"
          style="text-align: center"
          class="split-time font-12"
        >
          {{ moment(item.time).format("yyyy-MM-DD hh:mm:ss") }}
        </view>
        <view
          v-else-if="openid === item.send_openid"
          style="float: right"
          class="flex align-center item"
        >
          <view class="text-right">
            <text class="font-12">
              {{ item.nick_name1 }}
            </text>
            <rich-text :nodes="item.content"></rich-text>
          </view>
          <up-image
            :src="item.img_url1"
            width="40px"
            height="40px"
            radius="20px"
            class="m-l-l"
          ></up-image>
        </view>
        <view v-else style="float: left" class="flex align-center item">
          <up-image
            :src="item.img_url1"
            width="40px"
            height="40px"
            radius="20px"
          ></up-image>
          <view class="m-l-l">
            <text class="font-12">
              {{ item.nick_name1 }}
            </text>
            <rich-text :nodes="item.content"></rich-text>
          </view>
        </view>
      </view>
    </view>
    <view
      style="position: fixed; bottom: 50.5px; width: 100%"
      class="back-white"
    >
      <Comment
        ref="comment"
        type="message"
        :now-message-id="message_id"
        @success="success"
      ></Comment>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getMessageDetail } from "../../utils/api";
import { nextTick, ref } from "vue";
import Comment from "../../components/comment.vue";
import moment from "moment";
import { dbGet } from "../../utils/db";
const openid = dbGet("openid");
const list = ref([]);
const message_id = ref("");
const scrollToBottom = () => {
  const query = uni.createSelectorQuery();
  query.select(".content").boundingClientRect((rect) => {
    if (rect) {
      uni.pageScrollTo({
        scrollTop: rect.height + 200,
        duration: 1000,
      });
    }
  });
  query.exec();
};
onLoad(({ id }) => {
  message_id.value = id;
  getMessageDetail({ id })
    .then((res) => {
      if (res.code === 200) {
        list.value = res.data;
        scrollToBottom();
      }
    })
    .catch(() => {});
});
const success = (message) => {
  let item = list.value.find(({ send_openid }) => {
    return send_openid === openid;
  });
  item.content = message;
  item.create_time = moment().format("yyyy-MM-dd hh:mm:ss");
  list.value.push(item);
  nextTick(() => {
    scrollToBottom();
  });
};
</script>

<style scoped lang="less">
.split-time {
  color: gray;
  height: 60upx;
}

.item {
  height: 150upx;
}

.body {
  padding-bottom: 200upx;
}
</style>
